<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<div class="panel-heading clear">
		<div class="col-sm-2 pull-right">
         	<button id="button" type="button" class="btn  btn-success ">查询</button>
        </div>
        <div class="col-sm-2 pull-right">
            <select id="timeChangeSelect"  class="form-control">
              <option value="1" <c:if test="${'1' == form.timeSelect}"> selected="selected" </c:if> >今天</option>
	          <option value="2" <c:if test="${'2' == form.timeSelect}"> selected="selected" </c:if> >过去7天</option>
	          <option value="3" <c:if test="${'3' == form.timeSelect}"> selected="selected" </c:if> >过去30天</option>
            </select>
        </div>
        
           <div class="bs-example pull-right" append-source="">
      <form name="timepickerForm" class="form-inline ng-pristine ng-valid" role="form">
        <div class="form-group">
          <div class="form-group">
          <input type="text" name="start_date"  class="text-center form-control Wdate" value="${form.start }"		id="start" onClick="WdatePicker({skin:'twoer',maxDate: '#F{$dp.$D(\'end\',{d:0})||(\'%y-%M-{%d}\')}' })"></div>
          至
          <div class="form-group">
            <input type="text" name="end_date"  class="text-center form-control Wdate" value="${form.end }"	id="end"  onClick="WdatePicker({skin:'twoer',minDate: '#F{$dp.$D(\'start\',{d:0});}',maxDate: '%y-%M-%d' })"></div>
        </div>
      </form>
    </div>
    
       <span>总体情况</span>
       </div>
       <div class="clear">
       		<div class="col-md-3">
				<div class="panel p">
				<div class="panel-heading p-v-xs p-h-sm"><i class="ti-eye text-primary"></i> 曝光量</div>
				<div class="text-2x font-bold" id="viewCount">${form.totalData['pv'] }<small class="text-muted">次</small></div>
				</div>
			</div>
			<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm">总点击量</div>
			<div class="text-2x font-bold">${form.totalData['pc'] }<small class="text-muted">次</small></div>
			</div>
			</div>
			<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm">点击率</div>
			  <div class="text-2x font-bold">
			   <c:if test="${! empty form.totalData['ctr'] }"> <fmt:formatNumber value="${form.totalData['ctr'] }" maxFractionDigits="3" />%</c:if>
			  </div>
			</div>
			</div>
			<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm">花费</div>
			  <div class="text-2x font-bold">
			 <c:if test="${! empty form.totalData['total_cost'] }"> ￥<fmt:formatNumber value="${form.totalData['total_cost'] }" maxFractionDigits="3" /></c:if>
			  </div>
			</div>
			</div>
			  </div>
	
    <div class="panel-body"  >
    	<div id="dashboardChart" style="height: 400px ">
         </div>
    </div>
    <table class="table table-bordered table-hover bg-white">
      <thead>
        <tr>
          <th>时间</th>
          <th>曝光量</th>
          <th>点击量</th>
          <th>点击率</th>
          <th>花费</th>
        </tr>
      </thead>
      <tbody>
        </tbody><colgroup><col>
        <col width="12%">
        <col width="12%">
        <col width="12%">
        <col width="12%">
        <col >
        <col >
        </colgroup><tbody>
        <c:if test="${!empty form.dataList}">
	        <c:forEach items="${form.dataList }" varStatus="i" var="d">
        <tr>
          <td>
          ${d['rdate'] }
          </td>
          <td>${d['pv'] }</td>
          <td>${d['pc'] }</td>
          <td>><fmt:formatNumber value="${d['ctr'] }" maxFractionDigits="3" />%</td>
          <td>￥<fmt:formatNumber value="${d['total_cost'] }" maxFractionDigits="3" /></td>
        </tr>
        </c:forEach></c:if>
      </tbody>
    </table>
<script type="text/javascript">
$(function(){
	$("#timeChangeSelect").change(function(){
		var time=$('#timeChangeSelect').val();
		var startTime=null;
		var endTime=null;
		if(time==1){
			startTime=formatDate(new Date(),1);
			endTime=formatDate(new Date(),1);
		}
		if(time==2){
			startTime=formatDate(new Date(),7);
			endTime=formatDate(new Date(),0);
		}
		if(time==3){
			startTime=formatDate(new Date(),30);
			endTime=formatDate(new Date(),0);
		}
		$("#start").val(startTime);
		$("#end").val(endTime);
	})
	
	$("#button").click(function(){
		var time=$('#timeChangeSelect').val();
		handleDashboard($("#start").val(),$("#end").val(),time);
	});
	var rpts = ${form.data}
	///
	var xs = _.pluck(rpts , 'rdate')
	//渲染图表
	var chart = echarts.init(document.getElementById("dashboardChart"),'macarons')
	var option = {
		tooltip:{
			trigger: 'axis'
		},
		title: {
			text: ''
		},
		legend: {
            data:['曝光量（次）','点击量（次）','总花费']
        },
        xAxis: {
            data: xs
        },
        yAxis: {},
        series: [{
            name: '曝光量（次）',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
            data: _.pluck(rpts, 'pv')
        },{
            name: '点击量（次）',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
            data: _.pluck(rpts, 'pc')
        },{
            name: '总花费',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
            data: _.pluck(rpts, 'total_cost')
        }]
	}
	//
	chart.setOption(option)
})
</script>